<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Spin from "./Spin.svelte";
    import { fn } from "storybook/test";
    import type { SpinProps } from "./Spin";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import { Button } from "../Button";
    import { _ } from "svelte-i18n";

    const { Story } = defineMeta({
        title: "Components/Base/Spin",
        component: Spin,
        tags: ["autodocs"],
        argTypes: {
            type: {
                control: { type: "select" },
                options: ["pulse", "oval", "gear", "dot"],
                table: {
                    defaultValue: { summary: "dot" },
                },
            },
            size: {
                control: { type: "select" },
                options: ["small", "default", "large"],
            },
        },
        args: {},
    });

    let loading = $state(false);
    import { locale } from "svelte-i18n";
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin />
        </div>
    {/snippet}
</Story>

<Story name="Type">
    {#snippet template(args)}
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin />
        </div>
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin type="gear" />
        </div>
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin type="oval" />
        </div>
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin type="pulse" />
        </div>
    {/snippet}
</Story>

<Story name="Title">
    {#snippet template(args)}
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            <Spin>
                {#snippet title()}
                    <div>{$_("story.Spin.loading")}</div>
                {/snippet}
            </Spin>
        </div>
    {/snippet}
</Story>

<Story name="Toogle">
    {#snippet template(args)}
        <div style="width: 300px; height: 300px; border: 1px solid #ccc; position: relative">
            <div>{$_("story.Spin.content")}</div>
            {#if loading}
                <Spin title={$_("story.Spin.loading")} />
            {/if}
        </div>
        <Button onclick={() => (loading = !loading)}>Toggle</Button>
    {/snippet}
</Story>
